<template>
  <div class="pay-container">
    <h2>积分充值</h2>
    <div class="price-options">
      <div
          v-for="(option, index) in priceOptions"
          :key="index"
          class="price-card"
          @click="handleRecharge(option)"
      >
        <div class="amount">￥{{ option.amount }}</div>
        <div class="points">{{ option.points }}积分</div>
      </div>

      <!-- 新增自定义价格 -->
      <div class="price-card custom-price">
        <div class="custom-input">
          <span class="currency">￥</span>
          <input
              v-model.number="customAmount"
              type="number"
              min="0"
              step="0.1"
              placeholder="输入金额"
              @keyup.enter="handleCustomRecharge"
          >
        </div>
        <div class="points">{{ customPoints || '0' }}积分</div>
        <button
            class="confirm-btn"
            :disabled="!isValidCustomAmount"
            @click="handleCustomRecharge"
        >
          确认
        </button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "PayView",
  data() {
    return {
      priceOptions: [
        {amount: 0.1, points: 10},
        {amount: 6, points: 60},
        {amount: 30, points: 300},
        {amount: 128, points: 1280},
        {amount: 328, points: 3280},
        {amount: 648, points: 6480}
      ],
      customAmount: null,
    };
  },
  computed: {
    customPoints() {
      return this.customAmount ? Math.floor(this.customAmount * 10) : 0;
    },
    isValidCustomAmount() {
      return this.customAmount > 0 && this.customAmount <= 10000; // 限制最大金额
    }
  },
  methods: {
    handleRecharge(option) {
      // TODO 这里调用支付接口
      console.log('发起支付:', option);
      this.$message.success('充值成功')
      // 实际开发中需要：
      // 1. 调用支付接口获取支付参数
      // 2. 跳转支付页面/唤起支付SDK
      // 示例：
      // this.$axios.post('/api/pay/create', {
      //   amount: option.amount,
      //   points: option.points
      // }).then(response => {
      //   // 处理支付响应
      // });
    },
    handleCustomRecharge() {
      if (!this.isValidCustomAmount) {
        this.$message.error('请输入有效金额（0 < 金额 ≤ 10000）');
        return;
      }

      const customOption = {
        amount: this.customAmount,
        points: this.customPoints
      };

      this.handleRecharge(customOption);
    }
  }
};
</script>

<style scoped lang="scss">
.pay-container {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;

  h2 {
    text-align: center;
    margin-bottom: 30px;
    color: #333;
  }

  .price-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 20px;
    justify-content: center;

    .price-card {
      background: #fff;
      border-radius: 8px;
      padding: 20px;
      text-align: center;
      cursor: pointer;
      transition: all 0.3s;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      border: 1px solid #eee;

      &:hover {
        transform: translateY(-3px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      }

      .amount {
        font-size: 24px;
        color: #f60;
        font-weight: bold;
        margin-bottom: 8px;
      }

      .points {
        color: #666;
        font-size: 14px;
      }
    }

    .custom-price {
      position: relative;
      padding-bottom: 40px !important;

      .custom-input {
        margin: 10px 0;
        display: flex;
        align-items: center;
        justify-content: center;

        .currency {
          font-size: 20px;
          color: #f60;
          margin-right: 5px;
        }

        input {
          width: 80px;
          padding: 8px;
          border: 1px solid #eee;
          border-radius: 4px;
          text-align: center;
          font-size: 16px;

          &:focus {
            outline: none;
            border-color: #f60;
          }
        }
      }

      .confirm-btn {
        position: absolute;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
        padding: 6px 20px;
        background: #f60;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        transition: opacity 0.3s;

        &:hover {
          opacity: 0.9;
        }

        &:disabled {
          background: #ccc;
          cursor: not-allowed;
        }
      }
    }
  }
}
</style>
